<template>
	<view class="main">
		<view class="title">
			<alltitleVue :title="title" :url="url" />
		</view>
		<view class="" v-if="scienceList.length>0">
			<scroll-view show-scrollbar="false" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
				<view class="science" v-for="(item,index) in scienceList" :key="index" @click="goScience(item)">
					<view class="science-item" >
						<view class="item-tit">
							<view class="">
								{{item.title}}
							</view>
							<view class="item-text">
								<rich-text :nodes="item.content"></rich-text>
							</view>
							<!-- <view class="">
								<rich-text :nodes="item.content" class="parse-content"></rich-text>
							
							</view> -->
						</view>
						<view class="item-img">
							<image :src="item.photoUrl" mode=""></image>
						</view>
					</view>
					<view class="bot-box">
						<view class="time">
							{{item.createTime}}
						</view>
						<view class="people">
							<!-- <image src="../../static/home/seach.png" mode=""></image> -->
							<u-icon  size="32" name="eye" color="#B3B3B3"></u-icon>
							<text>{{item.browse}}人看过</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="no" v-else>
			<u-empty text="暂无科普" mode="list"></u-empty>
		</view>
	</view>
</template>

<script>
	import {
		setStore,
		getStore
	} from "../../utils";
	import {
		getarticle
	} from '../../service/api.js'
	export default{
		data(){
			return{
				title:"健康科普",
				scienceList: [
				]
			}
		},
		onLoad() {
			this.article()
		},
		methods:{
			goScience(item) {
			    // 获取本地存储的历史记录，如果没有则默认为空数组
			    let history = [];
			    const storedHistory = getStore('history');
			    
			    // 检查 storedHistory 是否有效，并且是一个有效的 JSON 字符串
			    if (storedHistory) {
			        try {
			            history = JSON.parse(storedHistory) || [];
			        } catch (error) {
			            console.error('解析历史记录失败:', error);
			            history = [];  // 如果解析失败，默认使用空数组
			        }
			    }
			
			    // 提取 item 中需要保存的字段
			    const { id, title, photoUrl } = item;
			
			    // 检查是否已有相同 id 的记录
			    const exists = history.some(record => record.id === id);
			
			    // 如果没有相同 id 的记录，才存储
			    if (!exists) {
			        history.push({ id, title, photoUrl });
			
			        // 存回本地存储，更新历史记录
			        setStore('history', JSON.stringify(history));
			    } else {
			        console.log('该项已经存在于历史记录中');
			    }
			
			    // 跳转到新的页面
			    uni.navigateTo({
			        url: `/integration/science/index?id=${id}`
			    });
			},
			async article() {
				let res = await getarticle();
				if(res.code==200){
					
					this.scienceList=res.rows
				}
				
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		background: #F5F3F0;
		padding: 24rpx;
		padding-top: 190rpx;
		.title{
			position: fixed;
			top: 0;
			z-index: 10;
			left: 0;
			width: 100%;
		}
	}
	.scroll-Y{
		height: calc(100vh - 235rpx);
		
		.science{
			background: #fff;
			margin-bottom: 24rpx;
			padding: 24rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
		}
	}
	.bot-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 22rpx;
		color: #B3B3B3;
		margin-top: 16rpx;
		.people{
			display: flex;
			align-items: center;
			color: #B3B3B3;
			image{
				width: 24rpx;
				height: 17rpx;
			}
		}
	}
	.time{
		color: #B3B3B3;
	}
	.science-item {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		
	
		.item-tit {
			width: 520rpx;
	
			view:first-child {
				font-weight: 500;
			}
	
			
		}
	
		.item-img {
			width: 160rpx;
			height: 118rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
	
			image {
				width: 160rpx;
				height: 118rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
			}
		}
	
	}
	.no {
		justify-content: center;
		display: flex;
		align-items: center;
		height: 100%;
	}
	.item-text {
		width: 490rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		/* 设置最大显示行数为2行 */
		overflow: hidden;
		font-size: 24rpx;
		text-overflow: ellipsis;
		color: #808080;
	}
</style>